// 获取地区销量趋势
async function getSalesData() {
    let res = await axios({ url: 'http://8.138.119.204:8182/api/trend?type=map' })
    return res.data
}
//地区销量趋势
async function renderSales() {
    let resdata = await getSalesData()
    // console.log(resdata.data);
    //深圳四个小图标
    const newArr = resdata.data.series.map(item => { return item.name })
    //月份
    const newArr1 = resdata.data.xAxis.map(item => { return item.length })
    // 初始化实例
    const box = document.querySelector('.areachart')
    const myecharts = echarts.init(box, 'dark')
    const option = {
        // title: {

        //     left: '5',// 左侧距离
        //     top: '5',// 顶部距离,
        //     textStyle: { fontSize: 15 }
        // },

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                // label: {
                //     backgroundColor: '#6a7985'
                // }
            }
        },
        legend: {
            top: '5',
            right: '10'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                // data: resdata.data.xAxis
                data: resdata.data.xAxis
            }
        ],
        yAxis: [
            {
                naem: '',
                type: 'value'
            }
        ],
        series: resdata.data.series.map(item => {
            return {
                name: item.name,
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: item.data
            }
        }),
        color: ['#5E7C84', '#A75B5B', '#AD7E72', '#6F978A', '#B0684E']
    };

    myecharts.setOption(option)
}
//计时器
let id = setInterval(function () {
    renderSales()
}, 1000)
renderSales()
//商家销售量统计
async function xiaoshou() {
    let res = await axios({ url: 'http://8.138.119.204:8182/api/seller' })
    // console.log(res.data.data);
    const box = document.querySelector('.xzz')
    const myecharts = echarts.init(box, 'dark')
    //y轴
    const newArr = res.data.data.map(item => { { return item.name } });
    console.log(newArr);
    //x轴
    const newArr2 = res.data.data.map(item => { { return item.value } })
    const option = {
        title: {
            text: '商家销量统计',
            top: 5,
            left: 5,
        },
        // 悬停效果
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },

        xAxis: {
            max: 'dataMax'
        },
        yAxis: {
            type: 'category',
            data: res.data.data.map(item => item.name),
            inverse: false,
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: 4 // only the largest 3 bars will be displayed
        },
        series: [
            {
                realtimeSort: true,
                // name: 'X',
                type: 'bar',
                data: res.data.data.map(item => item.value),
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true
                }
            }
        ],
        legend: {
            show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
    };


    myecharts.setOption(option);





}

xiaoshou()

//销售金哥
// 定义异步函数 getSalesMoneyData 用于获取销售金额数据
async function getSalesMoneyData() {
    // 使用 axios 发送 GET 请求到指定 URL 获取排名数据
    let res = await axios({ url: 'http://8.138.119.204:8182/api/rank' })
    // 返回请求响应中的数据部分
    return res.data
}

// 定义异步函数 renderSalesMoneyData 用于渲染销售金额数据图表
async function renderSalesMoneyData() {
    // 调用 getSalesMoneyData 函数并等待其完成，获取返回的数据
    let resdata = await getSalesMoneyData()
    //打印看一下数据
    console.log(resdata.data);


    // 获取 HTML 文档中类名为 'bt1' 的元素作为 ECharts 图表容器
    const box = document.querySelector('.bt1') //✨需要在html中的增加 bt1

    // 初始化 ECharts 实例，并应用 'dark' 主题样式
    const myecharts = echarts.init(box, 'dark')

    // 设置初始索引值为7，表示开始时显示的数据条目数量
    let index = 7

    // 从获取的数据中截取前 index 条记录，并映射出对应的数值和名称（xtitles）
    const datalist = resdata.data.slice(0, index).map(item => item.value)
    const xtitles = resdata.data.slice(0, index).map(item => item.name)

    // 配置图表选项 option，包括提示框、网格、x轴、y轴以及系列数据
    const option = {
        tooltip: { // 提示框组件配置，这里省略了具体配置项
            // 可以在此处定义触发方式、指示器类型等
        },
        grid: {
            top: '10%', // 网格上边距
            bottom: '10%' // 网格下边距
        },
        xAxis: {
            type: 'category', // 类别型轴
            data: xtitles // 横轴上的标签
        },
        yAxis: {
            type: 'value' // 数值型轴
        },
        series: [{
            type: 'bar', // 指定柱状图
            data: datalist.map((item, index) => ({
                value: item,
                itemStyle: {
                    color: index < datalist.length - 2 ? '#0094ff' : '#ff0000' // 根据索引设置条形颜色
                }
            }))
        }]
    };

    // 设置定时器，每隔2100毫秒执行一次更新操作
    setInterval(function () {
        // 更新索引，当达到数据末尾时重置为0，实现循环展示所有数据
        index++
        if (index >= resdata.data.length) {
            index = 0
        }

        // 获取当前索引对应的数据项
        const itemdata = resdata.data[index]

        // 移除 datalist 和 xtitles 最前面的元素（最旧的数据），并添加最新的数据到末尾，不写的话数据一直从右边循环出来，左边却不删除这样子下去，会造成一堆数据挤在一起不美观这样子
        datalist.shift();
        xtitles.shift();

        //这里的意思是添加新的数据从右边出来
        datalist.push(itemdata.value)
        xtitles.push(itemdata.name)

        // 更新 option 中的 xAxis 和 series 数据，确保图表反映最新的数据状态
        option.xAxis.data = xtitles
        option.series[0].data = datalist.map((item, index) => ({
            value: item,
            itemStyle: {
                color: index < datalist.length - 2 ? '#0094ff' : '#ff0000'
            }
        }))

        // 应用更新后的 option 到图表实例，刷新图表显示新的数据
        myecharts.setOption(option);
    }, 2100);

    // 首次渲染图表，使用初始化时构建的 option 对象
    myecharts.setOption(option)
}

// 调用 renderSalesMoneyData 函数开始绘制图表
renderSalesMoneyData()

